<template>
  <div class="main">
    <div class="middle"> 
      <div class="middle_title"></div>
      <div class="middle_head">
        <h1 class="hl_title">上海市疫情实时大数据</h1>
      </div>
      <div class="middle_body">
        <div style="margin:25px auto">
          <h2>疫情信息</h2>
        <div class="hl_data">
          <div class="hl_new_diagnosis">
            <span>新增确诊</span>
            <br>
            <div class="hl_data_1">{{newDiagnosis}}</div>
          </div>
          <div class="hl_now_diagnosis">
            <span>现有确诊</span>
            <br>
            <div class="hl_data_2">{{newDiagnosis}}</div>
          </div>
          <div class="hl_had_diagnosis">
            <span>累计确诊</span>
            <br>
            <div class="hl_data_3">{{newDiagnosis}}</div>
          </div>
          <div class="hl_cumulative_cure">
            <span>累计治愈</span>
            <br>
            <div class="hl_data_4">{{newDiagnosis}}</div>
          </div>
          <div class="hl_cumulative_died">
            <span>累计死亡</span>
            <br>
            <div class="hl_data_5">{{newDiagnosis}}</div>
          </div>
        </div>
        </div>
        <div class="hl_data_ins">新增数据统计周期为{{}}</div>
        <div style="margin:25px auto">
          <h2>疫情速报</h2>
        <div>
           <el-table
              :data="showTable"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>  
        </div>
        </div>
        <div @click="showAll = !showAll" class="show-more"><span>{{word}}></span></div>
        <div style="background:#f8f9fa">
          <div class="hl_choose_background">
             <!-- <div @click="showOne = !showOne" :class="showOne?'':''"></div> -->
             <div  @click="showOne = !showOne" :class="showOne?'hl_choose_map1':'hl_choose_map2'">
              <span>现有确诊</span>
             </div>
             <div @click="showOne = !showOne" :class="showOne?'hl_choose_map2':'hl_choose_map1'">
              <span>新增确诊</span>
             </div>
          </div>
          <div id="shanghaimap" style = "width:100%;height:702px"></div>
        </div>
        <div>
          <div class="hl_trend_background">
             <!-- <div @click="showOne = !showOne" :class="showOne?'':''"></div> -->
             <div  @click="trendOne()" :class="trend1?'hl_choose_line1':'hl_choose_line2'">
              <span>趋势1</span>
             </div>
             <div  @click="trendTwo()" :class="trend2?'hl_choose_line1':'hl_choose_line2'">
              <span>趋势2</span>
             </div>
             <div  @click="trendThree()" :class="trend3?'hl_choose_line1':'hl_choose_line2'">
              <span>趋势3</span>
             </div>
          </div>
          <div id="line" style = "width:100%;height:702px"></div>
        </div>
      </div>
      <div class="foot">
        <div class="elink">
          <a href="">填报疫情信息</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import shanghai from "D:/develop/疫情防控管理系统/汇报2/epidemic-management-system2/public/static/shanghai.json"
import { getMap } from "@/api/table"
import shanghai from '@/assets/json/shanghai.json'

export default {
    data() {
      return {
        // option 也可以在这里定义
        newDiagnosis:1,
        tabledata: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        showAll:false, 
        showOne:true,
        trend1:true,
        trend2:false,
        trend3:false
      }
      },
    methods: {
      trendOne(){
        this.trend1 = true
        this.trend2 = false
        this.trend3 = false
      },
      trendTwo(){
        this.trend1 = false
        this.trend2 = true
        this.trend3 = false
      },
      trendThree(){
        this.trend1 = false
        this.trend2 = false
        this.trend3 = true
      }
    },
    computed:{
      showTable:function(){
            if(this.showAll == false){                    
              var showList = [];
              if(this.tabledata.length > 3){
                for(var i=0;i<3;i++){
                  showList.push(this.tabledata[i])
                }
              }else{
                showList = this.tabledata
              }
              return showList;
            }else{
              return this.tabledata;
            }
          },
      word:function(){
        if(this.showAll == false){
          return '点击展开'
        }else{
          return '点击收起'
        }
      }

    },
    mounted(){
        this.$echarts.registerMap('shanghai',shanghai)
        let myCharts = this.$echarts.init(document.getElementById('shanghaimap'))
        let myCharts1 = this.$echarts.init(document.getElementById('line'))
        var option = {
            tooltip: {
              trigger: 'item',
              formatter: '1 (p / km2)'
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            visualMap: {
              min: 800,
              max: 50000,
              text: ['High', 'Low'],
              realtime: false,
              calculable: true,
              inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
              }
            },
            series: [
              {
                name: '上海市疫情分布图',
                type: 'map',
                map: 'shanghai',
                label: {
                  show: false
                },
                data: [
                  
                ],
              }
            ]
      }
        var option1 = {
            title: {
              text: 'Stacked Line'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: 'Email',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name: 'Union Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name: 'Video Ads',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name: 'Direct',
                  type: 'line',
                  stack: 'Total',
                  data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                  name: 'Search Engine',
                  type: 'line',
                  stack: 'Total',
                  data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
              ]
      }
      myCharts.setOption(option)
      myCharts1.setOption(option1)
    }
};
</script>
<style scoped>
.main{
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
  background-color: #c9edfc;
}
.middle{
  min-height: 31.25rem;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fefefe;
  overflow: hidden;
  box-sizing: border-box;
  line-height: normal;
}
div {
  display: block;
}
.middle{
  background:  #c9edfc;
}
.middle .middle_title{
    color: #fff;
    position: relative;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    padding: 0;
    height: 187px;
    margin-bottom: -.625rem;
    /* background-color: #10aeb5; */
    background-image: url(https://img1.baidu.com/it/u=2263760148,3468212087&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=427);
}
.middle_body{
    background-color: #fff;
    position: relative;
    /* border: 2px solid red; */
    border-radius: .625rem;
    margin: -.5rem 0 4rem 0;
    padding: .917rem 1.0625rem 1.875rem;
}
.middle_head{
    color: #fff;
    position: relative;
    padding: 0;
    height: 87px;
    margin-bottom: -.625rem;
    background-color: #c9edfc;
}
.hl_title{
  content: attr(data-text);
  display: block;
  position: absolute;
  color: #1c494d;
  top: 0;
}
.hl_data{
  display: flex;
  flex-wrap: nowrap;
}
.hl_new_diagnosis,.hl_now_diagnosis,.hl_had_diagnosis,.hl_cumulative_cure,.hl_cumulative_died{
  border: black;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 25%;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  text-align: center;
}
span{
  font-size: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: .625rem;
  color: #333;
  position: relative;
}
.hl_data_1,.hl_data_2,.hl_data_3{
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-top: .625rem;
    color: red;
}
.hl_data_4{
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-top: .625rem;
    color:aquamarine;
}
.hl_data_5{
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-top: .625rem;
    color: #333;
}
.hl_data_ins{
    align-items: center;
    color: #999;
    font-size: .8125rem;
    height: .8125rem;
    line-height: .8125rem;
    vertical-align: middle;
}
.show-more{
    text-align: center;
    font-size: .938rem;
    line-height: .938rem;
    color: #555;
    margin-top: .25rem;
}
.hl_choose_background{
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    height: 3rem;
    box-sizing: border-box;
    padding: 2px;
    background: #e3e6eb;
    border-radius: 6px;
}
.hl_choose_map1{
  margin: 1px;
  /* border: 1px solid black; */
  border-radius: .625rem;
  height: 2.7rem;
  line-height: 2.7rem;
  flex: 1 1 auto;
  text-align: center;
  font-weight: bold;
  background-color: #e3e6eb;
}
.hl_choose_map2{
  margin: 1px;
  /* border: 1px solid black; */
  height: 2.7rem;
  line-height: 2.7rem;
  border-radius: .625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
/* label::before{
      left: 50%;
  content: "\65B0\589E\786E\8BCA";
  position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

label::after{
      left: 0;
    border-radius: 6px;
    background: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    font-weight: 700;
  content: "新增确诊";
  position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
} */
.hl_choose{
    display: none;
    box-sizing: border-box;
}
.foot{
  height: 200px;
  background: #c9edfc;
}
.elink{
  height: 100px;
  line-height: 100px;
  border-radius: .625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
.elink a{
  font-size: 5ch;
  font-weight: 700;
}
.hl_trend_background{
      margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    height: 3rem;
    box-sizing: border-box;
    padding: 2px;
    background: #e3e6eb;
    border-radius: 6px;
}
.hl_choose_line2{
  margin: 1px;
  /* border: 1px solid black; */
  height: 2.7rem;
  line-height: 2.7rem;
  border-radius: .625rem;
  flex: 1 1 auto;
  text-align: center;
  background-color: #fff;
}
.hl_choose_line1{
     margin: 1px;
  /* border: 1px solid black; */
  border-radius: .625rem;
  height: 2.7rem;
  line-height: 2.7rem;
  flex: 1 1 auto;
  text-align: center;
  font-weight: bold;
  background-color: #e3e6eb;
}

</style>